import React, { useCallback, useMemo } from 'react';

import { Tooltip } from 'antd';
import { history } from 'umi'

import IconFont from '@/components/IconFont';
import LinkTo from '@/components/LinkTo';
import { useRequest } from '@/hooks';
import { DividerContainer } from '@/molecules';
import { deleteEntryMaterialById } from '@/pages/TurnoverSetting/EntrySetting/services';
import { onSuccessByDeleteFn } from '@/pages/TurnoverSetting/EntrySetting/util';

import ButtonPopconfirmAndToolTip from '../../components/ButtonPopconfirmAndToolTip';
import styles from '../index.less';
import SettingTable from './SettingTable';

// 入职流程配置
const SectionEntryMaterialsSetting = props => {
    const { data, loading, onChange } = props;

    const { run: deleteRun, loading: deleteLoading } = useRequest(id => deleteEntryMaterialById(id), {
        manual: true,
        onSuccess: res => {
            onSuccessByDeleteFn(res, onChange);
        }
    });

    const handleEdit = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryMaterial/edit',
            query: { id: record.id }
        });
    };

    const handleViewDetail = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryMaterial/detail',
            query: { id: record.id },
            state: { tabRoute: true, tabRefresh: true }
        });
    };

    const columns = useMemo(
        () => [
            {
                title: '配置名称',
                dataIndex: 'settingName',
                render: (text, record) => (
                    <LinkTo isDefault onClick={() => handleViewDetail(record)}>
                        {text}
                    </LinkTo>
                )
            },
            {
                title: '适用行政机构',
                dataIndex: 'administrativeScopeNames',
                render: (text, record) => (record.isDefault === 1 ? '全集团' : text?.join('、'))
            },
            {
                title: '操作',
                key: 'operation',
                width: 100,
                render: (text, record) => (
                    <DividerContainer>
                        <Tooltip placement="top" title="编辑">
                            <IconFont
                                style={{ verticalAlign: 'middle' }}
                                onClick={() => handleEdit(record)}
                                icon="iconlistfunction_edit_icon_default"
                                isButton
                            />
                        </Tooltip>
                        <ButtonPopconfirmAndToolTip
                            title="你确定要删除这行内容吗？"
                            tooltipTitle={record.isDefault === 1 ? '默认配置，不可删除' : '删除'}
                            onConfirm={() => deleteRun(record.id)}
                            disabled={record.isDefault === 1}
                        >
                            <IconFont icon="iconlistfunction_delete_icon_default" isButton />
                        </ButtonPopconfirmAndToolTip>
                    </DividerContainer>
                )
            }
        ],
        [deleteRun]
    );

    const handleAdd = useCallback(() => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryMaterial/edit'
            // state: { tabRoute: true, tabRefresh: true }
        });
    }, []);

    return (
        <div {...props}>
            <div className={styles.sectionTitle}>入职材料配置</div>
            <div className={styles.sectionDesc}>
                <p>定义新员工入职需提供的各类材料和证明</p>
            </div>
            <SettingTable
                dataSource={data}
                loading={loading || deleteLoading}
                columns={columns}
                authCode
                onAdd={handleAdd}
            />
        </div>
    );
};

export default SectionEntryMaterialsSetting;
